<template>
  <el-container class="home-container">

    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../../assets/heima.png" alt />
        <span>E-commerce system!</span>
      </div>
      <el-menu :default-active="activeIndex2" class="el-menu-vertical-demo" mode="horizontal" menu-trigger='click'
        background-color="#333744" text-color="#fff" active-text-color="#409BFF">
        <el-submenu index="1">
          <template slot="title">
            <el-avatar :src="avatar"></el-avatar>
            <span style="margin-left: 10px;">{{users}}</span>
          </template>
<el-menu-item index="1-1" @click="personals">
    <i class="el-icon-user-solid"></i>个人信息
</el-menu-item>
<el-menu-item index="1-2" @click='Changepwd'>
    <i class="el-icon-edit"></i>修改密码
</el-menu-item>
<el-menu-item index="1-4" @click='ewm'>
    <i class="el-icon-s-ticket"></i>个人名片
</el-menu-item>
<el-menu-item index="1-3" @click='logout'>
    <i class="el-icon-switch-button"></i>退出登录
</el-menu-item>
</el-submenu>
</el-menu>
</el-header>
<!-- 页面主体区域 -->
<el-container>
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu class="el-menu-vertical-demo" background-color="#333744" text-color="#fff" active-text-color="#409BFF" unique-opened :collapse='isCollapse' :collapse-transition='false' router :default-active="activeIndex">
            <el-menu-item :index="kk.name" v-for='(kk,index) in kkpath' :key="index">
                <i class="el-icon-s-home" style="margin-left: -4px;"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu :index="item.id+''" v-for='item in menulist' :key="item.id">
                <template slot="title">
              <i :class="iconObj[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
                <el-menu-item :index="'/home/'+subItem.path" v-for='subItem in item.children' :key="subItem.id">
                    <template slot="title">
                <i :class="iconObj2[subItem.id]"></i>
                <span>{{subItem.authName}}</span>
                <el-badge :value="quantity" :max="10" class="item" style="margin-top: -30px;margin-right: 40px;"
                  v-if='subItem.authName=="待审核商品"' v-show='quantity!==0'>
                </el-badge>
              </template>
                </el-menu-item>
            </el-submenu>
        </el-menu>

    </el-aside>
    <!-- 右侧内容主体 -->
    <el-main style="overflow: hidden;">
        <!-- 路由占位符 -->
        <router-view></router-view>
    </el-main>
</el-container>
<!-- 个人信息框 -->
<el-dialog title="个人信息" :visible.sync="personal" width="40%" :before-close="handleClose">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="头像">
            <img v-if="!progressFlag" class="head-img" :src="ruleForm.tx" style="border-radius: 50%; width: 100px;height: 100px;" />
            <div v-show="progressFlag" class="head-img">
                <el-progress type="circle" :percentage="progressPercent"></el-progress>
            </div>
            <el-upload class="img-btn" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadImg">
                <el-button type="success" plain round size="mini">更改头像</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
            <el-input v-model="ruleForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex" disabled>
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
            <el-input v-model="ruleForm.tel" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="jurisdiction">
            <el-radio-group v-model="ruleForm.jurisdiction" disabled>
                <el-radio label="超级管理员"></el-radio>
                <el-radio label="审核员"></el-radio>
                <el-radio label='普通员'></el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>
</el-dialog>
<!-- 修改密码框 -->
<el-dialog title="修改密码" :visible.sync="modify" width="40%" :before-close="handleClose">
    <el-alert :title="title" type="info" show-icon :closable=false center>
    </el-alert>
    <br>
    <el-steps :space="200" :active="activeIndex3" finish-status="success" align-center>
        <el-step title="输入完整手机号"></el-step>
        <el-step title="输入完整邮箱"></el-step>
        <el-step title="输入新密码"></el-step>
        <el-step title="再次输入密码"></el-step>
        <el-step title="完成"></el-step>
    </el-steps>
    <br>
    <el-form label-width="100px" :model="Form" :rules="Formrules" ref="Formref">
        <div class="info" v-show="activeIndex3==0">
            <el-form-item label="手机号">
                <p>{{tel}}</p>
            </el-form-item>
            <el-form-item label="完整手机号" prop="tel">
                <el-input v-model='Form.tel'></el-input>
            </el-form-item>
        </div>
        <div class="info" v-show="activeIndex3==1">
            <el-form-item label="邮箱">
                <p>{{email}}</p>
            </el-form-item>
            <el-form-item label="完整邮箱" prop="email">
                <el-input v-model='Form.email'></el-input>
            </el-form-item>
        </div>
        <div class="info" v-show="activeIndex3==2">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" autocomplete="off" v-model="Form.pass"></el-input>
            </el-form-item>
        </div>
        <div class="info" v-show="activeIndex3==3">
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" autocomplete="off" v-model="Form.checkPass"></el-input>
            </el-form-item>
        </div>
        <div class="info" v-show="activeIndex3==4">
            <el-alert title="修改提示的文案" type="warning" description="注意：修改成功会自动退出登录" show-icon :closable=false>
            </el-alert>
            <el-form-item style="margin-top: 15px;">
                <el-button type="primary" @click='submitForm'>确定修改</el-button>
            </el-form-item>
        </div>
        <el-button style="margin-top: 12px;" @click="pre" v-if="activeIndex3>0">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="activeIndex3<4">下一步</el-button>
    </el-form>
</el-dialog>
<el-dialog title="我的名片" :visible.sync="ewms" width="18%" :before-close="ewmed">

    <vue-qr :text="'用户名:'+users" :margin="0" :logoSrc="downloadData.icon + '?cache'" :size="200">
    </vue-qr>
</el-dialog>
</el-container>

</template>

<script>
    import {
        initDynamicRoutes
    } from '../../router'
    import vueQr from 'vue-qr'
    export default {
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.Form.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {},

                Form: {
                    tel: '',
                    email: '',
                    pass: '',
                    checkPass: '',
                    username: ''
                },
                ewms: false,
                //修改密码表单验证
                Formrules: {
                    pass: [{
                        required: true,

                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
                        message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符',
                        trigger: 'blur'
                    }],
                    checkPass: [{
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    tel: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }],
                },
                activeIndex: this.$route.path,
                users: '',
                activeIndex2: '',
                // 是否折叠
                isCollapse: false,
                //菜单列表
                menulist: [],
                //头像
                avatar: '',
                progressPercent: 0,
                progressFlag: false,
                //个人信息框控制
                personal: false,
                modify: false,
                title: '',
                tel: '',
                email: '',
                activeIndex3: 0,
                //图标
                iconObj: {
                    1: 'iconfont icon-users',
                    2: 'iconfont icon-baobiao',
                    3: 'iconfont icon-shangpin'
                },
                iconObj2: {
                    101: 'el-icon-s-custom',
                    102: 'el-icon-location',
                    201: 'el-icon-s-data',
                    202: 'el-icon-pie-chart',
                    301: 'el-icon-s-cooperation',
                    302: 'el-icon-sell',
                    303: 'el-icon-present',
                    304: 'el-icon-menu',
                    305: 'el-icon-set-up',
                    306: 'el-icon-s-custom'
                },
                kkpath: [{
                    name: 'calendar'
                }],
                kk: '',
                //二维码
                downloadData: {
                    url: 'https://blog.csdn.net/qq_46499070',
                    icon: ''
                },
                //信息
                quantity: 0
            };
        },
        created() {
            this.getmenu()

        },
        mounted() {
            this.users = this.$cookie.get('user');
            this.title = `修改用户${this.$cookie.get('user')}密码`
            this.Form.username = this.$cookie.get('user');
            if (this.users == null || this.users == '') {
                this.$message.error('请先登录哦！');
                this.$router.push({
                    path: '/'
                });
            };

        },
        components: {
            vueQr
        },
        methods: {
            ewmed(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            ewm() {
                this.ewms = true
            },
            //退出
            logout() {

                this.$confirm('此操作将账号退出, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get('api/logouts', {
                        params: {
                            username: this.users
                        }
                    }).then(res => {
                        if (res.data.data == '退出失败') {
                            this.$message({
                                type: 'success',
                                message: '退出失败'
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: res.data.data
                            });
                            this.$router.push({
                                path: '/'
                            });
                            this.$cookie.delete('user')
                            window.sessionStorage.clear()
                            location.reload();
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            },

            // 点击按钮，切换菜单的折叠与展开
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
            },
            //获取菜单列表
            getmenu() {
                this.$axios.get('api/getmenu', {
                    params: {
                        username: this.$cookie.get('user')
                    }
                }).then(res => {
                    if (res.data.meta.status != 200) return this.$message.error('获取列表失败')
                    for (const iterator of res.data.result2) {
                        this.avatar = iterator.tx
                        this.downloadData.icon = `/api${iterator.tx.slice(21)}`;
                        this.ruleForm = iterator;
                        this.tel = this.ruleForm.tel.substr(0, 3) + '****' + this.ruleForm.tel.substr(7)
                        this.email = this.ruleForm.email.substr(0, 3) + '****' + this.ruleForm.email.substr(7)
                    }
                    this.quantity = res.data.quantity
                    console.log(this.quantity);
                    this.menulist = res.data.data;
                    window.sessionStorage.setItem('rightlistpath', JSON.stringify(res.data.data))
                    initDynamicRoutes()
                })
            },
            personals() {
                this.personal = true
            },
            //个人信息头像
            uploadImg(f) {
                this.progressFlag = true
                let formdata = new FormData()
                formdata.append('picFile', f.file)
                formdata.append('username', this.$cookie.get('user'))
                this.$axios({
                    url: 'api/uploader',
                    method: 'post',
                    data: formdata,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    onUploadProgress: progressEvent => {
                        // progressEvent.loaded:已上传文件大小
                        // progressEvent.total:被上传文件的总大小
                        this.progressPercent = (progressEvent.loaded / progressEvent.total * 100)
                    }
                }).then(res => {
                    if (res.data.message == 'ok') {
                        this.ruleForm.tx = res.data.file
                        this.avatar = res.data.file
                        this.downloadData.icon = `/api${res.data.file.slice(21)}`;
                        if (this.progressPercent === 100) {
                            this.progressFlag = false
                            this.progressPercent = 0
                        }
                        this.$message({
                            type: 'success',
                            message: '修改头像成功'
                        });
                    } else {
                        this.$message.error('修改头像失败');
                    }
                }).then(error => {
                    console.log(error)
                })
            },

            // 上传图片前的过滤
            beforeAvatarUpload(file) {
                const isLt5M = (file.size / 1024 / 1024) < 5
                if (!isLt5M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!')
                }
                return isLt5M
            },
            Changepwd() {
                this.modify = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            next() {
                if (this.activeIndex3++ > 4) this.activeIndex3 = 0;
            },
            pre() {
                if (this.activeIndex3-- < 0) this.activeIndex3 = 0;
            },
            //提交修改密码
            submitForm() {

                this.$refs.Formref.validate(valid => {
                    if (valid) {
                        this.$axios({
                            method: 'put',
                            url: `api/editpwd`,
                            data: this.Form
                        }).then(res => {
                            if (res.data == '修改成功') {
                                this.activeIndex3 = 5;
                                return this.$axios.get('api/logouts', {
                                    params: {
                                        username: this.users
                                    }
                                }).then(res => {
                                    if (res.data.data == '退出成功') {

                                        this.$message({
                                            type: 'success',
                                            message: '密码已更改请重新登录'
                                        });
                                        this.$router.push({
                                            path: '/'
                                        });
                                        this.$cookie.delete('user')
                                        window.sessionStorage.clear()
                                        location.reload();

                                    }
                                })
                            } else {
                                this.$message.error(res.data);
                            }
                        })
                    } else {
                        this.$message.error("表单校验失败，请检查");
                        return false;
                    }
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .home-container {
        height: 100%;
    }
    
    .el-header {
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 20px;
        >div {
            display: flex;
            align-items: center;
            span {
                margin-left: 15px;
            }
        }
    }
    
    .el-aside {
        background-color: #333744;
        .el-menu {
            border-right: none;
        }
    }
    
    .el-main {
        background-color: #eaedf1;
    }
    
    .iconfont {
        margin-right: 10px;
    }
    
    .toggle-button {
        background-color: #4a5064;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    
    .up-img-cover {
        width: 100px;
        height: 100px;
    }
    
    .up-img-cover img {
        width: 100%;
    }
    
    .up-img-txt label {
        font-weight: 100;
        margin-top: 50px;
    }
    
    .item {}
</style>